<template>
  <div>
    <!-- 编辑频道-我的频道 -->
    <van-cell :border="false">
      <template #title>
        <span style="font-size: 18px">我的频道</span>
        <span style="font-size: 14px; color: #808080; padding-left: 20px"
          >点击切换频道</span
        >
      </template>
      <template #right-icon>
        <van-button plain type="danger" round size="small" @click="isEdit = !isEdit">
            {{isEdit==true?'完成' : '编辑'}}
        </van-button>
      </template>
    </van-cell>

    <van-grid :gutter="10">
      <van-grid-item
        v-for="(item,index) in userChannel"
        :key="item.id"
        @click="$emit('changeTab',index)"
      >
      <span slot="text" :class="{active: active==index}">
          {{item.name}}
      </span>
      <!-- 删除的小按钮图标 -->
      <van-icon name="close" slot="icon"  v-if="isEdit==true && item.id !=0" @click="$emit('del',item)"/>
      </van-grid-item>
    </van-grid>
    <!-- 编辑频道-我的频道 -->

    <!-- 推荐频道 -->
    <van-cell :border="false">
      <template #title>
        <span style="font-size: 18px">推荐频道</span>
        <span style="font-size: 14px; color: #808080; padding-left: 20px"
          >点击添加频道</span
        >
      </template>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        v-for="item in recommChannel"
        :key="item.id"
        :text="item.name"
        @click="$emit('add', item)"
      ></van-grid-item>
    </van-grid>
    <!-- 推荐频道 -->
  </div>
</template>
<script>
export default {
  props: {
    userChannel: {
      type: Array,
    },
    active:{
        type:Number,
    }
  },
  data() {
    return {
      allChannel: [], //所有频道列表
      isEdit:false,//我的频道的编辑状态
    };
  },
  mounted() {
    this.getAllChannel();
  },
  methods: {
    getAllChannel() {
      this.$axios.get("/v1_0/channels").then((res) => {
        console.log(res);
        //把获取到的数据给到所有的频道列表变量
        this.allChannel = res.data.channels;
      });
    },
  },
  computed: {
    //过滤推荐频道的数据
    recommChannel() {
      //循环所有的频道数据
      return this.allChannel.filter((item) => {
        //遍历我的频道的数据，findIndex判断数据在我的频道中不存在的
        return (
          this.userChannel.findIndex((userItem) => {
            return item.id == userItem.id;
          }) == -1
        );
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.van-cell {
  font-size: 16px;
  margin-top: 10px;
}
.active{
    color:#FF0000;
}
/deep/ .van-grid-item__content {
  padding: 8px;
  background: #f5f5f5;
  .van-icon-close{
      position:absolute;
      top: -15px;
      right: -50px;
  }
  /deep/ .van-grid-item__text {
    font-size: 14px !important;
  }
}
</style>